<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{

        }
    </style>
</head>




<body>
<div>
    <button>click</button>
    <ul class="Navigation" style="position: relative;margin-top: 100px;height: 10rem;background: #ccc">
        <li>首页</li>
        <li>Laravel 中文文档</li>
        <li>Packagist 中国镜像</li>
        <li>Composer 中文文档</li>
        <li>PHP 中文手册</li>
        <li>PHP 编程之道</li>
        <a href="javascript:;"></a>
        <li>问答社区</li>
    </ul>
</div>
<script src="jquery-1.9.1/jquery.min.js"></script>
<script>
    $(function(){
        var nav = $(".Navigation");
        $("button").click(function(){
//             if(nav.css("height")=="20"+"rem"){
//                nav.stop(false,true).animate({height:"10" + "rem"},500);
//            }else{
//                nav.stop(false,true).animate({height:"20" + "rem"},500);
//            }
//            $("#box").animate({height:"300px"});
            if(nav.css("display")=="none"){
                nav.stop(false,true).slideDown(1000);
            }else{
                nav.stop(false,true).slideUp(1000);
            }
        })
    })
</script>
</body>
</html>